import React, { useState } from 'react';
import { history } from 'umi';
import { Button, DatePicker, Input, Select } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { DeleteOutlined, EditOutlined, MailOutlined } from '@ant-design/icons';
import styles from './index.less';
import DetailModal from './Detail';

const { RangePicker } = DatePicker;
const { Option } = Select;
const { Search } = Input;

export type TableListItem = {
  key: number;
  name: string;
  creator: string;
  createdAt: number;
  result: string;
};

const provinceData = ['渠道来源', '签到时间'];
const cityData = {
  渠道来源: ['BOSS', '智联招聘', '前程无忧'],
  签到时间: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
const Interview: React.FC = () => {
  const tableListDataSource: TableListItem[] = [];
  const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
  const [showDetail, setShowDetail] = useState(false);
  const [admin, setAdmin] = useState(false);

  for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
      key: i + 1,
      name: 'BOSS',
      creator: creators[Math.floor(Math.random() * creators.length)],
      createdAt: Date.now() - Math.floor(Math.random() * 100000),
      result: i % 2 === 1 ? '一面通过' : i % 3 === 1 ? '二面未通过' : '全部通过',
    });
  }

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      dataIndex: 'key',
      render: (_) => <>{_}</>,
    },
    {
      title: '渠道来源',
      dataIndex: 'name',
      render: (_) => <>{_}</>,
    },
    {
      title: '姓名',
      dataIndex: 'creator',
      valueType: 'select',
      valueEnum: {
        all: { text: '全部' },
        付小小: { text: '付小小' },
        曲丽丽: { text: '曲丽丽' },
        林东东: { text: '林东东' },
        陈帅帅: { text: '陈帅帅' },
        兼某某: { text: '兼某某' },
      },
    },
    {
      title: (
        <>
          签到时间
          {/* <Tooltip placement="top" title="这是一段描述">
            <QuestionCircleOutlined style={{ marginLeft: 4 }} />
          </Tooltip> */}
        </>
      ),
      key: 'since',
      dataIndex: 'createdAt',
      valueType: 'date',
      //   sorter: (a, b) => a.createdAt - b.createdAt,
    },
    {
      title: '访问机构',
      dataIndex: 'jigou',
      render: (_) => <>南京擎盾</>,
    },
    {
      title: '面试岗位',
      dataIndex: 'gangwei',
      render: (_) => <>JAVA后端开发</>,
    },
    {
      title: '面试结果',
      dataIndex: 'result',
      render: (_) => <>{_}</>,
    },
    {
      title: '当前状态',
      dataIndex: 'memo1',
      render: (_, record, index) => {
        return index % 2 === 1 ? (
          <Button
            // type="primary"
            // ghost
            className={styles.btn}
            size="small"
            style={{ cursor: 'default', color: '#EA7F00', borderColor: '#EA7F00' }}
          >
            等待二面
          </Button>
        ) : index % 3 === 1 ? (
          <Button danger className={styles.btn} size="small" style={{ cursor: 'default' }}>
            不予录取
          </Button>
        ) : (
          <Button
            className={styles.btn}
            style={{ color: '#1BBF82', borderColor: '#1BBF82', cursor: 'default' }}
            size="small"
          >
            待入职
          </Button>
        );
      },
      // ellipsis: true,
      // copyable: true,
      // search: false,
    },
    {
      title: '操作',
      width: '230px',
      key: 'option',
      valueType: 'option',
      render: () => {
        return (
          <>
            <EditOutlined
              className={styles.editIcon}
              onClick={() => {
                setAdmin(true);
                setShowDetail(true);
              }}
            />
            <DeleteOutlined className={styles.delIcon} style={{ marginRight: 0 }} />
            <Button
              type="link"
              onClick={() => {
                setAdmin(false);
                setShowDetail(true);
              }}
            >
              查看详情
            </Button>
            <MailOutlined
              className={styles.editIcon}
              onClick={() => {
                history.push('/recruitment/interview/sendMessage');
              }}
            />
          </>
        );
      },
    },
  ];

  const handleProvinceChange = (value: string | number) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = (value: any) => {
    setSecondCity(value);
  };

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        columns={columns}
        request={(params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          console.log(params, sorter, filter);
          return Promise.resolve({
            data: tableListDataSource,
            success: true,
          });
        }}
        rowSelection={
          {
            // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
            // 注释该行则默认不显示下拉选项
            // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          }
        }
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        search={false}
        dateFormatter="string"
        headerTitle=""
        toolBarRender={() => [
          <Search
            placeholder="请输入申请部门"
            allowClear
            onSearch={() => {}}
            style={{ width: 245, borderRadius: 15, position: 'absolute', left: 25, top: 17 }}
          />,

          <span>
            筛选条件：
            <Select
              defaultValue={provinceData[0]}
              onChange={handleProvinceChange}
              className={styles.searchBtn}
              style={{ width: 120, marginRight: '14px' }}
            >
              {provinceData.map((province) => (
                <Option value={province} key={province}>
                  {province}
                </Option>
              ))}
            </Select>
            <Select
              value={secondCity}
              onChange={onSecondCityChange}
              className={styles.searchBtn}
              style={{ width: 120, marginRight: '376px' }}
            >
              {cities.map((city: any) => (
                <Option value={city} key={city}>
                  {city}
                </Option>
              ))}
            </Select>
          </span>,
          <Button>今日记录</Button>,
          <RangePicker size="middle" className={styles.searchBtn} />,
          <Button type="primary" key="primary">
            导出记录
          </Button>,
        ]}
        options={false}
      />
      <DetailModal
        admin={admin}
        visible={showDetail}
        onCancel={() => {
          setShowDetail(false);
        }}
      />
    </PageHeaderWrapper>
  );
};

export default Interview;
